@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
    <style>
        .el-cascader-menu{
            overflow: hidden;
        }
    </style>
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript" > </script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript" ></script>
    <script>
        //实例化编辑器

        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    form: {
                        id: 0,
                        title: '',
                        thumb: '',
                        content: '',
                        cateid: [],
                        tags: [],
                        summary: '',
                        _token:"{{csrf_token()}}"
                    },
                    cates: {!! $categories !!},
                    labels: {!! $labels !!},
                    editor: null,
                }
            },
            created(){
                this.editor = UE.getEditor('editor');
                let that = this;
                this.editor.ready(function(){
                    that.editor.setPlaceholder('请填写内容');
                });
            },
            methods: {
                update() {
                    this.form.content = this.editor.getContent();
                    let that = this;
                    this.$refs['form'].validate((valid) => {
                        if(!this.form.content){
                            this.$refs.form.fields[5].error = "请填写内容";return false;
                        }
                        if (valid) {
                            $.post("{{ route('user.index.publish') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({message: res.msg,type: 'success'});
                                    setTimeout(function(){
                                        window.location.href = "{{ route('user.index.article') }}";
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                tagSelect(){
                    if(this.form.tags.length > 5){
                        this.form.tags = this.tagsCurrent;
                        this.$message.error('最多添加5个标签');
                    }else{
                        this.tagsCurrent = this.form.tags;
                    }
                },
                //上传封面
                uploadSuccess(res, file) {
                    this.form.thumb = res.data.path;
                },
                uploadBefore(file) {
                    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传封面图片大小不能超过 2M!');
                    }
                    return isJPG && isLt2M;
                },
            }
        });
    </script>
@endsection
@section('content')
    @include('user.layout.head')
    <div class="container main">
        <div class="row">
            <div class="col-lg-2 user-left">
                @include('user.layout.left')
            </div>
            <div class="col-lg-10 main-list-item user-right" id="app" v-cloak>
                <div class="user-right-note">文章发布</div>
                <div class="col-lg-12 user-right-info">
                    <el-form :model="form" ref="form" status-icon label-position="top" class="login-form">
                        <el-form-item label="标题：" :rules="[{ required: true, message: '请填写标题', trigger: 'blur'},{ max: 50, message: '标题的长度不能超过50个字', trigger: 'blur' }]" prop="title">
                            <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                        </el-form-item>
                        <el-form-item label="摘要：" :rules="[{ required: true, message: '请填写摘要', trigger: 'blur'},{ max: 150, message: '摘要的长度不能超过150个字', trigger: 'blur' }]" prop="summary">
                            <el-input type="textarea" rows="5" v-model="form.summary" placeholder="请填写摘要"></el-input>
                        </el-form-item>
                        <el-form-item label="封面图：" :rules="[{ required: true, message: '请上传封面图', trigger: 'change'}]" prop="thumb">
                            <span style="color: #999;">上传的封面图比例为3:2 !!!</span>
                            <el-upload
                                    class="index-avatar-uploader" style="text-align: left"
                                    action="{{ $setting['img_upload'] }}"
                                    :show-file-list="false"
                                    name="image"
                                    :on-success="uploadSuccess"
                                    :before-upload="uploadBefore">
                                <img v-if="form.thumb" :src="form.thumb"
                                     class="index-avatar" style="width: 252px;height: 168px;border-radius:3px">
                                <i v-else class="el-icon-plus index-avatar-uploader-icon"  style="width: 252px;height: 168px;line-height: 168px;"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="类目：" prop="cateid" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                            <el-cascader  change-on-select :options="cates" v-model="form.cateid"></el-cascader>
                        </el-form-item>
                        <el-form-item label="标签：" prop="tags" :rules="[{ required: true, message: '请选择标签', trigger: 'blur'}]">
                            <el-select @change="tagSelect()" style="width: 100%" v-model="form.tags" multiple filterable  placeholder="请选择标签">
                                <el-option v-for="item in labels"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                            <span style="color: #999;">最多只能选择5个标签 !!!</span>
                        </el-form-item>
                        <el-form-item label="内容：" :rules="[{ required: true, message: '请填写内容', trigger: 'blur'}]" prop="content">
                            <div id="editor" style="height:500px;"></div>
                        </el-form-item>
                        <div class="form-submit text-center">
                            <el-button type="primary" style="width: 150px" @click="update()">提交发布</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
@endsection

